<template>
  <div class="help-center-page">
    <van-nav-bar title="帮助中心" left-arrow @click-left="goBack" />

    <!-- 1. 搜索栏 -->
    <div class="search-wrapper">
      <van-search
        v-model="searchQuery"
        shape="round"
        background="transparent"
        placeholder="请输入您想咨询的问题关键词"
        @search="onSearch"
        @clear="onClear"
      />
    </div>

    <!-- 2. 常见问题列表 -->
    <main class="faq-content">
      <div v-if="filteredFaqList.length > 0">
        <div v-for="category in filteredFaqList" :key="category.categoryTitle" class="faq-category">
          <h3 class="category-title">
            <van-icon :name="category.icon" />
            {{ category.categoryTitle }}
          </h3>
          <van-collapse v-model="activeCollapseNames" accordion>
            <van-collapse-item 
              v-for="item in category.items" 
              :key="item.q" 
              :title="item.q"
              :name="item.id"
            >
              <div class="answer-content" v-html="item.a"></div>
            </van-collapse-item>
          </van-collapse>
        </div>
      </div>
      <van-empty v-else description="未找到相关问题" />
    </main>
    
    <!-- 3. 联系客服 -->
    <footer class="contact-support">
      <p>没有找到您想问的？</p>
      <van-button icon="phone-o" type="primary" round @click="contactSupport">
        联系客服
      </van-button>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showConfirmDialog } from 'vant';
import 'vant/es/dialog/style';

const router = useRouter();

// --- 状态管理 ---
const searchQuery = ref('');
// 手风琴模式下，activeCollapseNames 始终为单个 name 或空
const activeCollapseNames = ref(); 

// --- 静态模拟数据 (FAQ) ---
const faqList = ref([
  {
    categoryTitle: '账户与登录',
    icon: 'user-circle-o',
    items: [
      { id: 1, q: '如何修改登录手机号？', a: '您好，目前暂不支持用户自行修改登录手机号。如需更换，请联系客服人员，并提供您的身份信息进行人工审核与修改。' },
      { id: 2, q: '忘记密码了怎么办？', a: '您可以在登录页面点击“忘记密码”，通过接收手机验证码来重置您的登录密码。' },
    ]
  },
  {
    categoryTitle: '预约问题',
    icon: 'calendar-o',
    items: [
      { id: 3, q: '如何进行探访预约？', a: '请在底部导航栏点击“预约”，进入预约服务页面。在“我要预约”标签页下，选择探访日期和时间段，填写访客信息后提交即可。' },
      { id: 4, q: '为什么我的预约被驳回了？', a: '预约被驳回可能有多种原因，例如：<br>1. 您选择的时间段已有其他预约。<br>2. 当日养老院有特殊活动安排。<br>3. 访客信息填写不完整或不实。<br>具体原因请查看驳回通知，或联系客服咨询。' },
      { id: 5, q: '可以取消已经通过的预约吗？', a: '可以。在“我的预约”列表中，找到对应的预约记录，点击“取消预约”按钮并确认即可。请尽量提前取消，方便我们进行安排。' },
    ]
  },
  {
    categoryTitle: '账单与支付',
    icon: 'bill-o',
    items: [
      { id: 6, q: '支持哪些支付方式？', a: '我们目前支持通过微信支付和支付宝进行在线支付。' },
      { id: 7, q: '对账单金额有疑问怎么办？', a: '请在账单页面点击对应账单的“查看详情”，核对各项费用明细。如果仍有疑问，请截图并通过“意见与反馈”页面提交您的问题，或直接联系我们的财务部门。' },
    ]
  }
]);

// --- 计算属性 (用于搜索过滤) ---
const filteredFaqList = computed(() => {
  if (!searchQuery.value.trim()) {
    return faqList.value;
  }
  const query = searchQuery.value.toLowerCase();
  const result = [];
  
  faqList.value.forEach(category => {
    const filteredItems = category.items.filter(item => 
      item.q.toLowerCase().includes(query) || item.a.toLowerCase().includes(query)
    );
    if (filteredItems.length > 0) {
      result.push({ ...category, items: filteredItems });
    }
  });
  
  return result;
});

// --- 方法 ---
const goBack = () => router.back();

const onSearch = (val) => {
  if (!val) {
    showToast('请输入关键词');
  }
};

const onClear = () => {
  // 清空搜索词，列表恢复
};

const contactSupport = () => {
  showConfirmDialog({
    title: '联系客服',
    message: '我们的客服热线是 400-800-8888，服务时间为工作日 9:00-18:00。',
    confirmButtonText: '立即拨打',
    cancelButtonText: '稍后联系',
  }).then(() => {
    // 模拟拨打电话
    showToast('正在为您转接...');
    // window.location.href = 'tel:400-800-8888';
  }).catch(() => {});
};
</script>

<style scoped>
.help-center-page {
  background-color: #f7f8fa;
  min-height: 100vh;
}

/* 搜索栏 */
.search-wrapper {
  padding: 10px 16px;
  background-color: #fff;
  border-bottom: 1px solid #ebedf0;
}
:deep(.van-search) {
  padding: 0;
}

/* FAQ 内容 */
.faq-content {
  padding: 16px;
  padding-bottom: 100px; /* 为底部联系客服按钮留出空间 */
}
.faq-category {
  margin-bottom: 24px;
}
.category-title {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
}
.category-title .van-icon {
  color: var(--van-primary-color);
  margin-right: 8px;
  font-size: 20px;
}
.van-collapse-item {
  border-radius: 8px;
  overflow: hidden;
}
:deep(.van-collapse-item__content) {
  background-color: #fff;
  color: #646566;
  font-size: 14px;
  line-height: 1.7;
}
.answer-content {
    padding: 12px 16px;
}

/* 联系客服 */
.contact-support {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background-color: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.contact-support p {
  font-size: 13px;
  color: #969799;
  margin: 0 0 12px 0;
}
</style>